<template>
	<div class="app-container">
		<div class="change" v-if="!islook">
			<el-divider content-position="left">基本信息</el-divider>
			<p>
			  <span>全重</span>
			  <input type="text" v-model="tempData.allWeight" placeholder="请输入全重" />
			</p>
			<p>
			  <span>品牌</span>
			  <input type="text" v-model="tempData.brand" placeholder="请输入品牌" />
			</p>
		  <p>
		    <span>商品名</span>
		    <input type="text" v-model="tempData.commodityName" placeholder="请输入商品名" />
		  </p>
			<p>
			  <span>设备名</span>
			  <input type="text" v-model="tempData.facilityName" placeholder="请输入设备名" />
			</p>
			<p>
			  <span>变频</span>
			  <input type="text" v-model="tempData.frequencys" placeholder="请输入变频" />
			</p>
			<p>
			  <span>润滑方式</span>
			  <input type="text" v-model="tempData.lubrication" placeholder="请输入润滑方式" />
			</p>
			<p>
			  <span>数量</span>
			  <input type="number" v-model="tempData.num" placeholder="请输入数量" />
			</p>
		  <p>
		    <span>规格型号</span>
		    <input type="text" v-model="tempData.model" placeholder="请输入规格型号" />
		  </p>
		  <p>
		    <span>单位</span>
		    <input type="text" v-model="tempData.nuit" placeholder="请输入单位" />
		  </p>
		  <p>
		    <span>电机参数</span>
		    <input type="text" v-model="tempData.parameters" placeholder="请输入电机参数" />
		  </p>
			<p>
			  <span>单重</span>
			  <input type="number" v-model="tempData.pieceWeight" placeholder="请输入单重" />
			</p>
			<p>
			  <span>功率</span>
			  <input type="text" v-model="tempData.powers" placeholder="请输入功率" />
			</p>
			<p>
			  <span>转/分</span>
			  <input type="text" v-model="tempData.revolutionsPerMinute" placeholder="请输入转/分" />
			</p>
			<p>
			  <span>材质</span>
			  <input type="text" v-model="tempData.texture" placeholder="请输入材质" />
			</p>
			<p>
			  <span>单价</span>
			  <input type="number" v-model="tempData.unitPrice" placeholder="请输入单价" />
			</p>
			<p>
			  <span>备注</span>
			  <input type="text" v-model="tempData.remarks" placeholder="请输入备注" />
			</p>
		  <p>
		    <span>所属分类</span>
		    <el-cascader
		      v-model="tempData.goodsId"
		      :options="twoClassify"
		      :props="{children: 'listwarehouseGoods',label: 'name',value:'id'}"
		      @change="handleChange">
		    </el-cascader>
		  </p>
		</div>
		<div class="change" v-if="islook">
			<el-divider content-position="left">基本信息</el-divider>
			<p>
			  <span>全重：</span><span>{{tempData.allWeight}}</span>
			</p>
			<p>
			  <span>品牌：</span><span>{{tempData.brand}}</span>
			</p>
		  <p>
		    <span>商品名：</span><span>{{tempData.commodityName}}</span>
		  </p>
			<p>
			  <span>设备名：</span><span>{{tempData.facilityName}}</span>
			</p>
			<p>
			  <span>频率：</span><span>{{tempData.frequencys}}</span>
			</p>
			<p>
			  <span>润滑方式：</span><span>{{tempData.lubrication}}</span>
			</p>
			<p>
			  <span>数量：</span><span>{{tempData.num}}</span>
			</p>
		  <p>
		    <span>存货编码：</span><span>{{tempData.procode}}</span>
		  </p>
		  <p>
		    <span>单位：</span><span>{{tempData.unit}}</span>
		  </p>
		  <p>
		    <span>参数：</span><span>{{tempData.parameters}}</span>
		  </p>
			<p>
			  <span>单重：</span><span>{{tempData.pieceWeight}}</span>
			</p>
			<p>
			  <span>功率：</span><span>{{tempData.powers}}</span>
			</p>
			<p>
			  <span>转/分：</span><span>{{tempData.revolutionsPerMinute}}</span>
			</p>
			<p>
			  <span>材质</span><span>{{tempData.texture}}</span>
			</p>
			<p>
			  <span>单价：</span><span>{{tempData.unitPrice}}</span>
			</p>
			<p>
			  <span>备注：</span><span>{{tempData.remarks}}</span>
			</p>
		  <p>
		    <span>所属分类：</span>
				<el-cascader
				  v-model="tempData.goodsId"
				  :options="twoClassify"
					disabled
				  :props="{children: 'listwarehouseGoods',label: 'name',value:'id'}"
				  @change="handleChange">
				</el-cascader>
		  </p>
		</div>
		<div class="fileup" v-if="fileNum.length != 0">
			<el-divider content-position="left">文档信息</el-divider>
			<div class="uping" v-for="(item,index) in fileNum" :key="index">
				<p>
					<span>资料名</span>
					<span>{{item.filename}}</span>
				</p>
				<p>
					<span>上传资料</span>
					<strong v-if="item.filePath">{{item.filename}}</strong>
					<strong v-if="item.filePath" @click="downLoad(item.filePath)">下载<i class="el-icon-download" /></strong>
				</p>
			</div>
		</div>
		<div class="submits">
			<!-- <div class="add" @click="addfile" v-if="!islook">新增文档</div> -->
			<div class="save" @click="saveOrder" v-if="!islook">保存</div>
			<div class="nosave" @click="nosaveOrder" v-if="!islook">取消</div>
			<div class="save" @click="back" v-if="islook">返回</div>
		</div>
	</div>
</template>

<script>
	import { addProduct,getCangku,updateProduct } from "@/api/cangku";
	import { getUserFiles } from '@/api/people'
	export default{
		data(){
			return{
				tempData: {
					allWeight: '',
					brand: '',
					commodityName: '',
					facilityName: '',
					frequencys: '',
					lubrication: '',
					num: '',
					procode: '',
					unit: '',
					parameters: '',
					pieceWeight: '',
					powers: '',
					revolutionsPerMinute: '',
					texture: '',
					unitPrice: '',
					remarks: ''
				},
				islook: false,
				fileNum: [],
				twoClassify: [],
				writeOradd: 0  //新增0，编辑1
			}
		},
		watch:{
			
		},
		mounted(){
			this.cangkuList();
			console.log(this.$route.params)
			if(this.$route.params.look){
				this.islook = true
			}
			if(this.$route.params.options){
				this.tempData = JSON.parse(this.$route.params.options)
				this.writeOradd = 1
				console.log(this.tempData)
				this.getFilesList(this.tempData.id)
			}else{
				this.writeOradd = 0
			}
		},
		methods:{
			// 获取商品文档信息
			getFilesList(id){
				getUserFiles({parentId: id}).then(res => {
					console.log(res)
					if(res.data.list.length != 0){
						this.fileNum = []
						res.data.list.map(item => {
							this.fileNum.push({
								filename: item.fileDescribe,
								filePath: item.fileName
							})
						})
					}
				})
			},
			// 选择商品分类
			handleChange(value) {
			  console.log(value);
			  this.tempData.goodsId = value[1]
			},
			cangkuList(){
			  getCangku({}).then(res => {
			    console.log(res)
			    this.twoClassify = res.data
			  })
			},
			downLoad(filepath){
				window.location.href = filepath
			},
			// 保存
			saveOrder(item) {
				if(this.writeOradd == 0){
					addProduct(this.tempData).then(res => {
					  console.log(res)
					  this.$message({
					    message: res.message,
					    type: 'success'
					  })
						this.$router.go(-1)
					})
				}else{
					delete this.tempData.insertTime
					delete this.tempData.updateTime
					updateProduct(this.tempData).then(res => {
					  console.log(res)
					  this.$message({
					    message: res.message,
					    type: 'success'
					  })
						this.$router.go(-1)
					})
				}
			},
			nosaveOrder(){
				this.$router.go(-1)
			},
			back(){
				this.$router.go(-1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.change {
	  display: flex;
	  flex-wrap: wrap;
	  background: #fff;
	  border-radius: 8px 8px 0 0;
	  padding: 20px;
	  > p {
	    width: 25%;
	    font-size: 14px;
	    display: flex;
	    align-items: center;
	    color: #333;
	    /deep/.el-input__inner {
	      // width: inherit;
	      background: none;
	      height: 32px;
	      // line-height: 32px;
	      color: #333;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding: 0 25px;
	    }
	    /deep/.el-input__icon {
	      line-height: 32px;
	    }
	    .userselect {
	      // max-width: 250px;
	      flex: 1;
	    }
	
	    > span {
	      display: block;
	      width: 120px;
	      text-align: right;
	      padding-right: 15px;
				&:last-child{
					text-align: left;
				}
	    }
	    > input {
	      width: inherit;
	      flex: 1;
	      height: 32px;
	      border-radius: 3px;
	      border: 1px solid rgba(0, 0, 0, 0.1);
	      padding-left: 10px;
	      color: #333;
	    }
	  }
	}
	.submits{
		display: flex;
		padding: 15px 20px;
		background: #fff;
		margin-top: 20px;
		border-radius: 8px;
		justify-content: flex-end;
		align-items: center;
		>div{
			width: 80px;
			height: 32px;
			text-align: center;
			line-height: 32px;
			color: #fff;
			font-size: 14px;
			border-radius: 4px;
			margin-left: 30px;
			cursor: pointer;
		}
		.add{
			background: #18a05e;
		}
		.save{
			background: #2196F3;
		}
		.nosave{
			background: #999;
		}
	}
	.fileup{
	position: relative;
	padding: 20px;
  background: #fff;
  border-radius: 0 0 8px 8px;
	display: flex;
	flex-wrap: wrap;
  // align-items: center;
  justify-content: space-between;
	.uping{
		width: 49%;
		margin-bottom: 20px;
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		border-radius: 5px;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
		> p {
		  width: 90%;
		  font-size: 14px;
		  display: flex;
			flex-wrap: wrap;
		  align-items: center;
		  color: #333;
		  /deep/.el-input__inner {
		    // width: inherit;
		    background: none;
		    height: 32px;
		    // line-height: 32px;
		    color: #333;
		    border: 1px solid rgba(0, 0, 0, 0.1);
		    padding: 0 25px;
		  }
		  /deep/.el-input__icon {
		    line-height: 32px;
		  }
		  /deep/.el-upload-dragger {
				width: 100%;
		    height: 100px;
		  }
		  /deep/.el-upload-dragger .el-icon-upload {
		    font-size: 60px;
		    color: #C0C4CC;
		    margin: 0; 
		    line-height: 1;
				width: 100%;
		  }
			/deep/.el-upload {
				width: 100%;
			}
		  .userselect {
		    // max-width: 250px;
		    flex: 1;
		  }
		
		  > span {
		    display: block;
		    width: 100px;
		    text-align: right;
				padding-right: 15px;
				&:last-child{
					text-align: left;
				}
		  }
		  > input {
		    width: inherit;
		    flex: 1;
		    height: 32px;
		    border-radius: 3px;
		    border: 1px solid rgba(0, 0, 0, 0.1);
		    padding-left: 10px;
		    color: #333;
		  }
			>strong{
				display: inline-block;
				padding-right: 50px;
				font-weight: 100;
				font-size: 14px;
				&:last-child{
					cursor: pointer;
					color: #13ce66;
					font-weight: 600;
				}
			}
		  >div{
		    width: inherit;
		    flex: 1;
		  }
		}
	}
}
</style>
